<%@page contentType="text/html;" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
</head>

<body>
<form name="form1" method="GET" action="ServTest" id="form1">
<table>
<tr>
<td>Number 1</td><td><input type="text" name="n1"/></td>
</tr>
<tr>
<td>Number 2</td><td><input type="text" name="n2"/></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Calculate"/></td>
</tr>
<tr>
<td>Result</td><td><input type="text" value="" id="result"/></td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript" src="jquery/jquery-2.1.1.js"></script>
     <script type="text/javascript">
        $(document).ready(function(){
        	console.log("entro");
        	
        	// Attach a submit handler to the form
        	$("#form1").submit(function( event ) {
        	console.log("form sub");
        	// Stop form from submitting normally
        	event.preventDefault();
        	// Get some values from elements on the page:
        	var $form = $( this ),
        	term = $form.find( "input[name='s']" ).val(),
        	url = $form.attr( "action" );
        	// Send the data using post
        	var posting = $.post( url, { s: term } );
        	// Put the results in a div
        	posting.done(function( data ) {
        	var content = $( data ).find( "#content" );
        	$( "#result" ).empty().append( content );
        	});
        	});
        	
        	
/*         	$("#form1").submit(function () {
        	console.log("calcula"); 
        	$.ajax({
        	type: form.attr("method"),
        	url: form.attr("action"),
        	data: form.serialize(),
        	success: function (data) {
        		var result=data;
        		$("#result").attr("value",result);
        	}
        	});

        	//return false;
        	}); */
        });
    </script>